// 官方文档： https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
// nvue获取元素的节点信息：https://ask.dcloud.net.cn/question/87094
let dom ;
// #ifdef APP-NVUE
dom = weex.requireModule('dom')
// #endif

import throttle from './../../../function/throttle.js'
import {sleep} from './../../../function/test.js'

let timer;//定时器
export default {
	data() {
		return {
			// 退出全屏时播放器进度条的宽度（每当show=true时，动态计算宽度，也就是控制面板显示时）
			extFull_VideoSilder_Widht: 0,//默认145，下面事件会在 show监听里执行（transition.js）
			extFull_VideoSilder_isShow: false,//由于每次计算进度条宽度任务是异步，所以需要等异步完成才显示，不然有些bug 
			
			// 全屏后的窗口尺寸宽度（在下面的this.getVideoResize()方法）
			Resize_windowWidth: 0,
		}
	},
	async mounted(){
		// this.$nextTick(function () {
		//     // 仅在整个视图都被渲染之后才会运行的代码
		// 	// 暂时不需要在这里获取
		// })
	},
	// Vue 实例销毁后调用
	destroyed(){
		// 已迁移（直接点页面自动的返回，无法触发此处destroyed事件）
		
		// 消除定时器
		clearTimeout(timer)
	},
	// Vue 实例销毁之前调用
	beforeDestroy(){
		// 确保在实例销毁前清除定时器
		
		// 消除定时器
		clearTimeout(timer)
	},
	watch:{
		/* 3.3.6.8 新增优化 2022-0201 */
		// 视频索引发生变化时，也需要重置extFull_VideoSilder_isShow = false，不然可能会存在没有进度条的问题（安卓上无此问题）
		VideoSrcIndex: {
			handler(newSrcIndex,oldSrcIndex){
				this.extFull_VideoSilder_isShow = false
			}
		},
		isFullScreenChange:{
			handler(newFull,olFull){
				/* 设置监听后，也必须有取消监听，不然在用户第二次进入播放页的时候，
			 	 * 但他点击进入全屏后，又设置监听了监听，此时是两个监听事件，但第一个监听事件会直接报错。
				 * 而设置了取消监听事件后，上面说的问题，就不会复现了。
				 */ 
				// 进入全屏时设置监听窗口尺寸变化事件，退出全屏时取消监听窗口尺寸变化事件
				if (newFull == true){
					// 设置监听窗口尺寸变化事件
					this.getVideoResize()
				} else {
					// 取消监听窗口尺寸变化事件
					this.offVideoResize()
				}
				
				// 只在退出全屏时执行，解决了如果用户是通过物理按键退出全屏时，也需要设置屏幕为竖屏方向
				this.getFullscreen()
			},
			immediate: true,
		},
		// 监听变化后的窗口尺寸
		Resize_windowWidth:{
			handler(newResSize,oldResSize){
				if (newResSize > this.FullscreenWidth){
					// 更新全屏时的cover-view宽度
					this.FullscreenWidth = newResSize
				}
			}
		},
		show:{
			handler(newShow,oldShow){
				/* 判断是否 => 不是全屏模式显示并且是退出全屏状态下
				 * 如果上面注释的条件成立，则锁定屏幕方向为竖屏
				 * 用于 iOS平台 上可能存在的退出全屏后页面还是横屏的bug
				 */ 
				this.getFullscreen()

				// 判断是否进入全屏状态，并且变化后的宽度是否大于FullscreenWidth(旧的手机高度=全屏的宽度，不是100%精准)
				if (this.isFullScreenChange==true&&this.Resize_windowWidth>this.FullscreenWidth){
					/* 如果变化后的窗口宽度 > FullscreenWidth ，则使用变化后的宽度作为全屏的宽度
					 * 因为假设变化后的窗口宽度 > FullscreenWidth(旧的手机高度)，则说明此时是游戏类全屏模式。
					 * 但 Android平台 手机上底部的虚拟按键（导航栏按钮含返回、主页、任务管理）是有高度的。
					 * 全屏后虽然隐藏了，但在没有第一次进入全屏时，获取的旧的手机高度就是状态栏高度 + 窗口高度，而没有获取到虚拟按键的高度。
					 * 所以当进入全屏状态时，必须判断一下变化后的窗口宽度是否大于旧的手机高度，然后更新全屏后的真正宽度
					 */
					this.FullscreenWidth = this.Resize_windowWidth
					// 更新最新的全屏后的窗口宽度
					this.TouchFullWidth = Number(this.FullscreenWidth)+'px'
					// 更新全屏时的slider组件宽度（视频进度条组件上自动减去两边时间的宽度）
				} 

				// 当show发生变化时，并且是全屏模式显示状态下，隐藏系统虚拟按键
				if (this.isFullScreenChange==true && this.platform_mobile=='android'){
					// #ifdef APP-PLUS
					// 获取是否全屏模式显示（游戏类全屏模式）
					let isFullScreen = plus.navigator.isFullscreen();
					// 判断是否全屏模式显示（游戏类全屏模式）
					if (isFullScreen==true){
						/* 这里的隐藏系统虚拟按键（导航栏）是用来当用户手动侧滑显示了。
						 * 之后点击屏幕的时候，会触发show事件，然后再吧虚拟按键隐藏掉。
						 */
						// 隐藏系统虚拟按键（导航栏）：https://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.hideSystemNavigation
						plus.navigator.hideSystemNavigation();
					}
					// #endif
				}
			}
		},
		timeUpdate:{
			handler(newUpdate,oldUpdate){
				/* 2022-0117 新增优化
				* 用于修复：当视频首次播放后，可能存在进度条和左右两边的进度时间没有显示的问题。
				* 在浏览器能看到左右时间渲染了但没有宽度，进度条没有渲染是因为计算宽度后才让他显示。
				*/

				// 当前时长 >= 0.001 并且 进度条 = false 时， 获取进度条的宽度
				if (newUpdate[0].currentTime >= Number(0.001) && this.extFull_VideoSilder_isShow == false) {
					// 首次进度条宽度 = 0 则获取
					if (this.extFull_VideoSilder_Widht == 0) {
						// 获取退出全屏时的播放器进度条宽度
						this.getExtFullSliderWidth()
					}
				}
			},
			immediate: true,
			deep: true	
		},
		isPlay:{
			handler(newPlay,oldPlay){
				// 已废弃!
				if (this.isFullScreenChange==false){
					// 取当前时长（当前进度时间）是否 >= 0.0001 ，直到是 >= 后才停止，并且再获取进度条的宽度
					//this.get_currentTime()	
				}
			},
			immediate: true
		}
	},
	async mounted(){
		
	},
	methods:{

		/* 2022-0117 新增优化 （已废弃，暂时保留，后面再看能不能用到，直接改造）
		 * 用于修复：当视频首次播放后，可能存在进度条和左右两边的进度时间没有显示的问题。
		 * 在浏览器能看到左右时间渲染了但没有宽度，进度条没有渲染是因为计算宽度后才让他显示。
		 */

		// 获取当前时长（当前进度时间）是否 >= 0.0001 ，直到是 >= 后才停止，并且再获取进度条的宽度
		async get_currentTime(){
			// 这里不能用Promise返回出去，因为只能接受到第一次状态，后面的状态无法获取到，因为每次都是一个新的对象。
			// 所以暂时只能在这里写死，不能写一个封装方法，其他地方去复用，搞不了。
			return new Promise((resolve,reject) => {
				if (this.timeUpdate[0].currentTime >= Number(0.01)) {
					timer = setTimeout(() => {
						// 销毁定时器
						clearTimeout(timer)
						// 重新获取播放状态
						this.get_currentTime()
					},300)
				}else {
					// 播放中状态
					console.log('进度条状态1 === ' + this.extFull_VideoSilder_isShow)
					console.log('已是播放中并且播放进度大于0.001，开始获取退出全屏的进度条')
					// 获取退出全屏时的播放器进度条宽度
					this.getExtFullSliderWidth()	
				}
			})
		},


		// 获取退出全屏时的播放器进度条宽度
		async getExtFullSliderWidth(){
			/* 2022-0113 新增优化
			 * 在currentTime>=0.001时才获取dom节点，避免元素没渲染就获取节点，然后控制台报错的问题
			 */ 

			// 必须在show=true是才能延时获取，否则show=false时，元素是没有渲染的，此时获取不到，就会报错
			if (this.createAudio==false && this.show == true && this.clickCi <= 1 && this.timeUpdate[0].currentTime >= 0.001){
				// 只能在[退出全屏]UI控制面板是开启的状态 并且 获取dom节点是开启的状态 下才可以执行（config）
				if (this.Config.extFullControl.is_Show == true && this.Config.createSelectorQuery == true){
					// 延时100毫秒再获取
					timer = await setTimeout(() => {
						// 此处事件在 show监听里执行（transition.js），也就是控制面板显示时，重新计算宽度
						// 如果延时200秒后show还是等于true，并且防抖结束，则可以获取元素节点
						if (this.show == true && this.ref_type == 'my' && this.isFullScreenChange == false){
							// 获取退出全屏时的左边进度时间和右边总时间的和其他按钮的宽度，动态计算进度条的宽度
							//console.log('获取退出全屏时的左边进度时间和右边总时间的宽度')
							if (dom) {
								/* 3.3.3版本 新增优化 （维护者 => 网友 昵称：z）
								* 新增dom方法适用于subnvue子窗体
								*/
								dom.getComponentRect(this.$refs.extFull_Bottom_box, data => {
									let extFull_Bottom_box_Width = data.size.width;
									//
									dom.getComponentRect(this.$refs.extFull_left_public_VideoIcons_box, data1 => {
										let extFull_left_public_VideoIcons_box_Width = data1.size.width;
										//
										dom.getComponentRect(this.$refs.extFull_left_currtime, data2 => {
											let extFull_left_currtime_Width = data2.size.width;
											//
											dom.getComponentRect(this.$refs.extFull_right_duration, data3 => {
													let extFull_right_duration_Width = data3.size.width;
													// 
													dom.getComponentRect(this.$refs.extFull_right_public_VideoIcons_box, data4 => {

															/* 2022-0113 新增优化
																* 修复获取不到节点信息时候，然后进度条不显示，因为宽度是0（概率极低）
																*/ 

															
															// 没有获取到节点信息时候，就返回出去
															if (data4==undefined || data4==null) {
																// 判断控制面板的show状态
																if (this.show==true){
																	// 重新获取节点信息
																	this.getExtFullSliderWidth()
																}
																// 消除定时器
																clearTimeout(timer)
																// 然后返回
																return
															} else {
																let extFull_right_public_VideoIcons_box_Width = data4.size.width;
																let Bottom_box_Width =extFull_Bottom_box_Width
																let left_box_Width = extFull_left_public_VideoIcons_box_Width + extFull_left_currtime_Width
																let right_box_Width = extFull_right_duration_Width + extFull_right_public_VideoIcons_box_Width

																// 计算[退出全屏]时的播放器进度条宽度
																this.extFull_VideoSilder_Widht = Bottom_box_Width - left_box_Width - right_box_Width
																// 计算完毕后显示[退出全屏]时的播放器进度条
																this.extFull_VideoSilder_isShow = true
																// 消除定时器
																clearTimeout(timer)
															}														
														})
												})
										})
									})
								})
							} else {
								// 获取退出全屏时的左边进度时间和右边总时间的和其他按钮的宽度，动态计算进度条的宽度
								//console.log('获取退出全屏时的左边进度时间和右边总时间的宽度')
								var query = uni.createSelectorQuery().in(this); 
								query.select('#extFull_Bottom_box').boundingClientRect();
								query.select('#extFull_left_public_VideoIcons_box').boundingClientRect();
								query.select('#extFull_left_currtime').boundingClientRect();
								query.select('#extFull_right_duration').boundingClientRect();
								query.select('#extFull_right_public_VideoIcons_box').boundingClientRect();
								query.exec(data => {  
									// 返回数组格式，每个id是一个对象
									//console.log(JSON.stringify(data));
									//console.log(data)
								
									console.log('获取退出全屏时的播放器进度条宽度')
									console.log(data)

									/* 2022-0113 新增优化
									* 修复获取不到节点信息时候，然后进度条不显示，因为宽度是0（概率极低）
									*/ 

									// 没有获取到节点信息时候，就返回出去
									if (data==undefined || data==null) {
										// 判断控制面板的show状态
										if (this.show==true){
											// 重新获取节点信息
											this.getExtFullSliderWidth()
										}
										// 消除定时器
										clearTimeout(timer)
										// 然后返回
										return
									} else {
										// 中括号里的数字代表数组的第几项 如[0] 代表第一项
										// [0] extFull_Bottom_box = [退出全屏时]控制面板-底部-Bottom部分（整体的）
										// [1] extFullleft_public_VideoIcons_box = 左边的暂停/播放按钮部分
										// [2] extFullleft_currtime = 左边时间部分
										// 正中间是播放器进度条，是需要动态计算宽度的
										// [3] extFullright_duration = 右边总时间部分
										// [4] extFullright_public_VideoIcons_box = 右边的小窗/进入全屏按钮部分
										
										// 这里是为了好区分，特意加的这么长的名字
										let extFull_Bottom_box_Width = data[0].width //整体容器宽度(你可以理解成是播放器非全屏时的宽度)
										let extFull_left_public_VideoIcons_box_Width = data[1].width //左
										let extFull_left_currtime_Width = data[2].width //左
										let extFull_right_duration_Width = data[3].width //右
										let extFull_right_public_VideoIcons_box_Width = data[4].width//右
										
										// 这里是为了方便计算，代码短，看起来舒服，特意这么写的，虽然有重复工作
										let Bottom_box_Width = extFull_Bottom_box_Width
										let left_box_Width = extFull_left_public_VideoIcons_box_Width + extFull_left_currtime_Width
										let right_box_Width = extFull_right_duration_Width + extFull_right_public_VideoIcons_box_Width
										
										// 计算[退出全屏]时的播放器进度条宽度
										this.extFull_VideoSilder_Widht = Bottom_box_Width - left_box_Width - right_box_Width
										// 计算完毕后显示[退出全屏]时的播放器进度条
										this.extFull_VideoSilder_isShow = true
										
										//console.log('计算[退出全屏]时的播放器进度条宽度 ===')
										//console.log(this.extFull_VideoSilder_Widht)

										// 消除定时器
										clearTimeout(timer)
									}
								});
							}
							// [新版本] 2021-1219 新增判断show=true才执行此处代码，不会再有时候爆红了，下面的爆红信息先留这里备用
							// 如果太快，有时候会爆红，找不到元素节点，爆红如下
							// [JS Framework] Failed to execute the callback function:
							// 07:51:00.350 TypeError: Cannot read property 'ref' of undefined
							// 07:51:00.351 reportJSException >>>> exception function:__WEEX_CALL_JAVASCRIPT__, exception:JavaScript execute error!Uncaught TypeError: Cannot read property 'ref' of undefined
						}
						// 不要再调试期间当show刚刚等于true时就退出页面，否则延时100比退出页面慢，就会爆上面的错
					}, 100);
				}
				
			}
			//		
		},
		
		// 设置监听窗口尺寸发生变化 和 获取video元素节点
		getVideoResize(){
			uni.onWindowResize((res) => {
				//console.log('设置监听窗口尺寸发生变化')
				//console.log('变化后的窗口宽度=' + res.size.windowWidth)
				//console.log('变化后的窗口高度=' + res.size.windowHeight)


				// 记录变化后的宽度
				this.Resize_windowWidth = res.size.windowWidth
				// 判断是否进入全屏状态，并且变化后的宽度是否大于FullscreenWidth(旧的手机高度=全屏的宽度，不是100%精准)
				if (this.isFullScreenChange==true&&this.Resize_windowWidth>this.FullscreenWidth){
					/* 如果变化后的窗口宽度 > FullscreenWidth ，则使用变化后的宽度作为全屏的宽度
					 * 因为假设变化后的窗口宽度 > FullscreenWidth(旧的手机高度)，则说明此时是游戏类全屏模式。
					 * 但 Android平台 手机上底部的虚拟按键（导航栏按钮含返回、主页、任务管理）是有高度的。
					 * 全屏后虽然隐藏了，但在没有第一次进入全屏时，获取的旧的手机高度就是状态栏高度 + 窗口高度，而没有获取到虚拟按键的高度。
					 * 所以当进入全屏状态时，必须判断一下变化后的窗口宽度是否大于旧的手机高度，然后更新全屏后的真正宽度
					 */
					this.FullscreenWidth = this.Resize_windowWidth
					this.FullSliderWidth = this.Resize_windowWidth
					// 更新最新的全屏后的窗口宽度
					this.TouchFullWidth = Number(this.FullscreenWidth)+'px'
				} 
				else
				// 判断是否退出全屏状态，并且变化后的宽度是否大于FullscreenHeight(旧的手机宽度=全屏后的高度)
				if (this.isFullScreenChange==false&&this.Resize_windowWidth>this.FullscreenHeight){
					/* 如果变化后的窗口宽度 > FullscreenHeight ，则再次设置锁定屏幕为竖屏。
					 * 因为假设变化后的窗口宽度 > FullscreenHeight（旧的手机宽度），则说明此时已经退出全屏了
					 * 但 iOS平台 手机在退出全屏后时，页面有概率还是横屏的，那么Resize_windowWidth肯定大于旧的手机宽度
					 * 此时需要再重新锁定为竖屏，即可修复可能存在的有概率退出全屏后页面还是横屏的BUG
					 * 因为旧的手机宽度时钩子创建完毕时，获取一次手机宽度，此时播放器都可能还没创建完毕，所以这个宽度是100%的竖屏方向的手机宽度
					 */
					
					// #ifdef APP-PLUS
					// 解除锁定屏幕方向
					plus.screen.unlockOrientation();
					// 锁定屏幕方向为竖屏
					plus.screen.lockOrientation("portrait-primary");
					// 只在iOS平台 （安卓和苹果 机制不一样）
					if (this.platform_mobile == 'ios'){
						// 显示状态栏
						this.videoContext.showStatusBar()
					}
					// #endif
				}
				
				
				
				// 节流，在一定时间内，只能触发一次（不然调试的时候在控制台上会输出很多次）
				throttle(()=>{
					console.log('变化后的窗口宽度=' + this.Resize_windowWidth)
				},200)
				
				//console.log('变化后的宽度宽度 === ' + this.Resize_windowWidth)
				//console.log('旧的手机宽度=全屏后的高度 == '+ this.FullscreenHeight)
			})
		},
		offVideoResize(){
			console.log('取消监听窗口尺寸变化事件')
			uni.offWindowResize(() => {
				// 没有任何回调，console不能写这里
			})
		},
		// 判断应用当前是否全屏模式显示（是否游戏类的全屏模式）
		getFullscreen(){
			// 这里是用于手机物理按键返回达到的退出全屏目的，然后需要还原一些竖屏下的状态。

			// 应用全屏模式显示时返回true，否则返回false。
			// #ifdef APP-PLUS
			// 判断是否 => 不是全屏模式显示并且是退出全屏状态下，用于修复 iOS平台 上可能存在的退出全屏后页面还是横屏的bug
			if (this.isFullScreenChange==false){
				// 为了避免用户如果是用手机的物理按键返回达到的退出全屏，此时并没有走this.exitFullScreen()方法，但也需要设置为竖屏方向
				
				// 解除锁定屏幕方向 （此处不用解除屏幕方式，不然show监听里执行，如果是退出全屏状态但是手机是横屏拿着，旧会先变成横屏的画面再变成竖屏的画面）
				// plus.screen.unlockOrientation();
				// 锁定屏幕方向为竖屏
				plus.screen.lockOrientation("portrait-primary");
				// 只在iOS平台 （安卓和苹果 机制不一样）
				if (this.platform_mobile == 'ios'){
					// 显示状态栏
					this.videoContext.showStatusBar()
				}
				
				/* 2022-0113新增优化
				 * 修复 用户使用 手机的物理按键退出全屏后
				 * 没有显示系统的状态栏和虚拟按键的问题
				 */ 
				// 显示系统虚拟按键（导航栏）（可能部分机型上控制台调试会报错，只是可能）
				plus.navigator.showSystemNavigation();
				// 设置为非全屏模式，可显示安卓上的状态栏：https://www.html5plus.org/doc/zh_cn/navigator.html
				plus.navigator.setFullscreen(false);
			} 
			// #endif
		},
	}
}